<template>
  <div class="left_main flexC">
    <div class="flex3 flexC">
     <p class="font_s18 colorF Bold titles ">重点管理机构</p>
      <div class="flex1 flexC content">
        <div class="flex2 flexC">
          <p class="Bold font_s18 title_top colorF">重点关注</p>
          <ul class="flex flex1 colorF Bold textC JustifyContentSA AlignItemsC">
            <li>
              <p class="font_s27 square">255</p>
              <p class="font_s16">当年未年检</p>
            </li>
            <li>
              <p class="font_s27 square">257</p>
              <p class="font_s16">连续两年及以上</p>
            </li>
            <li>
              <p class="font_s27 square">141</p>
              <p class="font_s16">名存实亡</p>
            </li>
            <!-- <li>
              <p class="font_s27 square">4</p>
              <p class="font_s16">信访舆情</p>
            </li>
            <li>
              <p class="font_s27 square">236</p>
              <p class="font_s16">证书过期</p>
            </li> -->
          </ul>
        </div>
        <div class="flex3 flexC">
          <p class="Bold font_s18 title_top colorF">重点行业</p>
          <ul class="flex flex1 Bold colorF textC JustifyContentSA AlignItemsC">
            <li>
              <p class="font_s27 square2">2</p>
              <p class="font_s16">托育机构</p>
            </li>
            <li>
              <p class="font_s27 square2">126</p>
              <p class="font_s16">养老机构</p>
            </li>
            <li>
              <p class="font_s27 square2">31</p>
              <p class="font_s16">民办学校</p>
            </li>
          </ul>
          <ul class="flex flex1 Bold colorF textC JustifyContentSA AlignItemsC">
            <li>
              <p class="font_s27 square2">17</p>
              <p class="font_s16">婚介机构</p>
            </li>
            <li>
              <p class="font_s27 square2">78</p>
              <p class="font_s16">职业培训</p>
            </li>
            <li>
              <p class="font_s27 square2">20</p>
              <p class="font_s16">行业协会</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="flex2 flexC">
      <!-- <p class="font_s18 colorF Bold title">社会组织生命周期 <span style=" padding:0rem 4rem;">管生命周期</span></p> -->
      <div class="flex textC cursor title">
        <p class="Bold font_s18 colorF flex1 " @click="categoryFun(1)" :class="{ category: category === 1 }">社会组织生命周期</p>
        <p class="Bold font_s18 colorF flex1 " @click="categoryFun(2)" :class="{ category: category === 2 }">监管生命周期</p>
      </div>
      <div class="flex1 content flexC JustifyContentC" v-if="category === 1"><img style="width: 100%;" src="../../assets/img/organization/25.png" alt="" /></div>
      <div class="flex1 content flexC JustifyContentC" v-if="category === 2"><img style="width: 100%;" src="../../assets/img/organization/22.png" alt="" /></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'OrgRight',
  data () {
    return {
      category: 1
    }
  },
  mounted () {},
  methods: {
    categoryFun (index) {
      this.category = index
    }
  }
}
</script>
<style lang="scss" scoped>
.left_main {
  position: absolute;
  top: 15%;
  right: 1rem;
  height: 80%;
  width: 25%;
  .titles {
    line-height: 2.5rem;
    padding-left: 2rem;
    margin: 0 0.25rem -0.25rem 0.25rem;
    background: url(../../assets/img/organization/15.png) no-repeat;
    background-size: 100% 100%;
  }
  .title {
    margin: 0rem 0.25rem -0.25rem 0.25rem;
    line-height: 2.5rem;
    background: url(../../assets/img/organization/24.png) no-repeat;
    background-size: 100% 100%;
    .category {
      background: url(../../assets/img/organization/23.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .content {
    background: url(../../assets/img/organization/16.png) no-repeat;
    background-size: 100% 100%;
    .title_top {
      margin-top: 1rem;
      margin-left: 0.5rem;
      padding-left: 3rem;
      width: 16.3125rem;
      height: 2.375rem;
      line-height: 2.375rem;
      background: url(../../assets/img/organization/19.png) no-repeat;
      background-size: 100% 100%;
    }
    .square {
      width: 5.125rem;
      height: 5.125rem;
      margin: 0 auto;
      line-height: 5.125rem;
      background: url(../../assets/img/organization/20.png) no-repeat;
      background-size: 100% 100%;
    }
    .square2 {
      width: 8.0625rem;
      height: 4.4375rem;
      line-height: 4.4375rem;
      background: url(../../assets/img/organization/21.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
